<template>
	<view class="booking">
		<view class="booking-top">
			<view class="color">预约装修</view>
		    <view class="color1">RESERVATION FOR FREE ROOM</view>
				<u-input placeholder='请选择一个城市' v-model="value" :type="type" :border="border" @click="show = true" />
				<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
				<u-input class="u-input1" v-model="value1" :type="type1" placeholder='姓名(必填)' :border="border" />
				<u-input class="u-input1" v-model="value2" :type="type1" placeholder='联系方式(必填)'  :border="border" />
				<u-input class="u-input1" v-model="value3" :type="type1" placeholder='楼盘(必填)'  :border="border" />
		</view>
		<view class="btn">
		      <button>立即预约</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:"booking",
		data() {
			return {
					value: '',
					value1: '',
					value2: '',
					value3: '',
					type: 'select',
					type1: 'text',
					show: false,
					border: true,
					actionSheetList: [
						{
							text: '北京市'
						},
						{
							text: '天津市'
						},
						{
							text: '河北省'
						}
					],
			};
		},
		methods:{
			// 点击actionSheet回调
				actionSheetCallback(index) {
				this.value = this.actionSheetList[index].text;
			}
		}
	}
</script>

<style lang="scss" scoped>
.booking{
	width: 100%;
	margin-top: 100rpx;
	.btn{
	  width: 90%;
	  margin: auto;
	  margin-top: 20rpx;
	  button{
	    color: white;
	    margin-bottom: 30rpx;
	    background-color: #c26636;
	  }
	}
	.booking-top{
		width: 90%;
	  .u-input1{
		  margin-top:20rpx;
	  }
		margin: auto;
	  .color{
	    color: #c97036;
	    font-size:60rpx ;
	    text-align: center;
	  }
	  .color1{
	    color: #9a9fb7;
	    text-align: center;
	    font-size: 30rpx;
	  }
	}
	
	
}
</style>